| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149 |
| /**
* @ngdoc directive
* @name patternfly.sort.component:pfSort
* @restrict E
*
* @description
* Sort component
* <br><br>
*
* @param {object} config configuration settings for the sort:<br/>
* <ul style='list-style-type: none'>
* <li>.fields - (Array) List of sortable fields containing:
* <ul style='list-style-type: none'>
* <li>.id - (String) Unique Id for the sort field
* <li>.title - (String) The title to display for the sort field
* <li>.sortType - (String) The sort type, 'alpha' or 'numeric'
* </ul>
* <li>.currentField - (Object) Currently selected field
* <li>.isAscending - (boolean) Current sort direction is ascending. True for ascending, False for descending
* <li>.onSortChange - ( function(sortId, sortDirection ) Function to call when the current sort params change
* </ul>
*
* @example
<example module="patternfly.sort">
<file name="index.html">
<div ng-controller="ViewCtrl" class="row example-container">
<div class="col-md-12">
<pf-sort id="exampleSort" config="sortConfig"></pf-sort>
</div>
<hr class="col-md-12">
<div class="col-md-12">
<label class="events-label">Items: </label>
</div>
<div class="col-md-12">
<div ng-repeat="item in items" class="col-md-12 cfme-row-column">
<div class="row">
<div class="col-md-3">
<span>{{item.name}}</span>
</div>
<div class="col-md-3">
<span>{{item.count}}</span>
</div>
<div class="col-md-3">
<span>{{item.description}}</span>
</div>
</div>
</div>
</div>
</div>
</file>
<file name="script.js">
angular.module('patternfly.sort').controller('ViewCtrl', ['$scope',
function ($scope) {
$scope.items = [
{
name: "Item 7",
count: 432,
description: 'Very nice item'
},
{
name: "Item 6",
count: 22,
description: 'It lasts forever'
},
{
name: "Item 3",
count: 632,
description: 'Good stuff cheap'
},
{
name: "Item 2",
count: 12,
description: 'Fantastic'
},
{
name: "Item 9",
count: 99,
description: 'It does alright'
},
{
name: "Item 4",
count: 442,
description: 'Horrible'
},
{
name: "Item 1",
count: 42,
description: 'Most excellent'
},
{
name: "Item 8",
count: 2,
description: 'Get it while it lasts'
},
{
name: "Item 5",
count: 321,
description: 'Beautiful style'
}
];
var compareFn = function(item1, item2) {
var compValue = 0;
if ($scope.sortConfig.currentField.id === 'name') {
compValue = item1.name.localeCompare(item2.name);
} else if ($scope.sortConfig.currentField.id === 'count') {
compValue = item1.count - item2.count;
} else if ($scope.sortConfig.currentField.id === 'description') {
compValue = item1.description.localeCompare(item2.description);
}
if (!$scope.sortConfig.isAscending) {
compValue = compValue * -1;
}
return compValue;
};
var sortChange = function (sortId, isAscending) {
$scope.items.sort(compareFn);
};
$scope.sortConfig = {
fields: [
{
id: 'name',
title: 'Name',
sortType: 'alpha'
},
{
id: 'count',
title: 'Count',
sortType: 'numeric'
},
{
id: 'description',
title: 'Description',
sortType: 'alpha'
}
],
onSortChange: sortChange
};
}
]);
</file>
</example>
*/
|